<template>
  <div class="showCustomerVehicleInfo">
    <div>
      <div class="detail_main">
        <div>
          <h2>车主信息</h2>
        </div>
        <FormPanel ref="currentVisit" :list="fcustomerVehicleInfoList" :cols="2" :isSubmitBtn="false" :collapse="false" :labelWidth="120" />
      </div>
    </div>
    <div
      :style="{
        position: 'absolute',
        left: 0,
        bottom: 0,
        right: 0,
        zIndex: 9999,
        borderTop: '1px solid #e9e9e9',
        padding: '10px 20px',
        background: '#fff',
        textAlign: 'right'
      }"
    >
      <div style="clear:both;">
        <el-button type="primary" @click="closeDialog">关 闭</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import { dictionary } from '@/utils/dictMixin';
import moment from 'moment';
import { searchRoleByCode } from '@/api/common/empSelect/index';
import dictCode from '@/utils/dictCode';
import ToggleTable from '@/pages/customerRepair/customerCare/maintenanceRemind/ToggleTable';
import ToggleText from '@/pages/customerRepair/customerCare/maintenanceRemind/toggleText';
import { getCustomerVehicleInfo } from '@/api/customerRepair/customerCare/maintenanceRemind';
// import { getProvinceList, getCityList } from '@/api/adc/collectionManage/common';
export default {
  name: 'remindInputs',
  components: {
    ToggleTable,
    ToggleText
  },
  mixins: [dictionary],
  props: ['vinData'],
  data() {
    return {
      type: this.buttonType || 2,
      ismonitoring: false, // 监控
      isMonitoringAutoAtion: false,
      fcustomerVehicleInfoList: this.customerVehicleInfoForm(),
      fetchApi2: getCustomerVehicleInfo,
      fetchParams2: { xhrAbort: true },
      provinceList: [],
      provinceCode: '',
      vin: null // 选中的vin
    };
  },
  created() {},
  mounted() {
    this.$nextTick(() => {
      this.remindSourcePath = this.remindSource;
    });
    this.getCustomerVehicleShowInfo();
  },
  methods: {
    async getCustomerVehicleShowInfo() {
      const params = {
        vin: this.vinData.VIN
      };
      const res = await getCustomerVehicleInfo(params);

      this.initCustomerVehicleInfoForm(res.data.rows[0]);
    },
    // 获取省份
    // getProvinceData() {
    //   getProvinceList()
    //     .then(res => {
    //       if (res.code === '000000') {
    //         this.provinceList = res.data;
    //         this.fcustomerVehicleInfoList.find(item => item.fieldName === 'PROVINCE').itemList = res.data.map(x => ({ text: x.name, value: x.id }));
    //       } else {
    //         this.$message.error(res.description || '获取省份失败');
    //       }
    //       this.getCityData();
    //     })
    //     .catch(err => {});
    // },
    // 获取市
    getCityData() {
      let provinceId = this.fcustomerVehicleInfoList.find(item => item.fieldName === 'PROVINCE').initialValue;
      this.provinceList.map(val => {
        if (val.id == provinceId) {
          this.provinceCode = val.code;
        }
      });
      // getCityList({ provinceCode: this.provinceCode })
      //   .then(res => {
      //     if (res.code === '000000') {
      //       this.fcustomerVehicleInfoList.find(item => item.fieldName === 'CITY').itemList = res.data.map(x => ({ text: x.name, value: x.id }));
      //     }
      //   })
      //   .catch(err => {});
    },
    initCustomerVehicleInfoForm(data) {
      let newStr = [];
      for (let [key, val] of Object.entries(data)) {
        let param = {
          fieldName: key,
          value: val
        };
        newStr.push(param);
      }
      this.setCustomerVehicleInfo(newStr);
      this.getProvinceData();
    },

    // 把返回的数据赋值给表单
    setCustomerVehicleInfo(dataList) {
      const formList = [...this.fcustomerVehicleInfoList];
      const formFieldNames = formList.map(x => x.fieldName);
      dataList.forEach(x => {
        if (formFieldNames.includes(x.fieldName)) {
          let target = formList.find(k => k.fieldName == x.fieldName);
          if (!target) return;
          target.initialValue = x.value;
        }
      });
    },
    customerVehicleInfoForm() {
      return [
        {
          type: 'INPUT',
          label: '客户编号',
          fieldName: 'OWNER_NO',
          initialValue: '',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '客户名称',
          fieldName: 'OWNER_NAME',
          initialValue: '',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '客户手机',
          fieldName: 'MOBILE',
          disabled: true,
          initialValue: ''
        },
        {
          type: 'INPUT',
          label: '联系人',
          fieldName: 'CONTACTOR_NAME',
          initialValue: '',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '联系人电话',
          fieldName: 'CONTACTOR_MOBILE',
          initialValue: '',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '邮编',
          fieldName: 'ZIP_CODE',
          initialValue: '',
          disabled: true
        },
        {
          type: 'SELECT',
          label: '省份',
          fieldName: 'PROVINCE',
          initialValue: '',
          itemList: [],
          disabled: true
        },
        {
          type: 'SELECT',
          label: '城市',
          fieldName: 'CITY',
          initialValue: '',
          itemList: [],
          disabled: true
        },
        {
          type: 'SELECT',
          label: '单位性质',
          fieldName: 'INDUSTRY_FIRST',
          itemList: this.createDictList('8251'),
          initialValue: '',
          disabled: true
        },
        {
          type: 'SELECT',
          label: '行业类型',
          fieldName: 'INDUSTRY_SECOND',
          itemList: this.createDictList('8252'),
          initialValue: '',
          disabled: true
        },
        {
          type: 'INPUT',
          label: 'E_MAIL',
          fieldName: 'E_MAIL',
          initialValue: '',
          disabled: true
        },
        {
          type: 'SELECT',
          label: '客户类型',
          fieldName: 'OWNER_PROPERTY',
          initialValue: '',
          itemList: this.createDictList('8011'),
          disabled: true
        },
        {
          type: 'INPUT',
          label: '客户地址',
          fieldName: 'ADDRESS',
          initialValue: '',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '客户备注',
          fieldName: 'REMARK',
          initialValue: '',
          disabled: true
        }
      ];
    },
    // 取消
    closeDialog() {
      this.$emit('close', false);
    }
  }
};
</script>
<style lang="less" scoped>
.showCustomerVehicleInfo {
  width: 100%;
  .left {
    width: 43%;
    float: left;
    .detail_main {
      border: 1px solid #ebeef5;
      margin-bottom: 10px;
      .detail_top {
        background: #f2f2f2;
        border-bottom: 1px solid #ebeef5;
        height: 25px;
        line-height: 25px;
        padding: 0 4px;
        padding-right: 2px;
      }
      .detail_containter {
        padding-top: 10px;
      }
    }
  }
  .right {
    width: 57%;
    float: left;
    box-sizing: border-box;
    padding: 0 4px;
    .detail_main {
      border: 1px solid #ebeef5;
      margin-bottom: 10px;
      .detail_top {
        background: #f2f2f2;
        border-bottom: 1px solid #ebeef5;
        height: 25px;
        line-height: 25px;
        padding: 0 10px;
        padding-right: 10px;
      }
      .detail_containter {
        padding-top: 10px;
      }
    }
  }
}
</style>
